<template>
	<view class="fmail">
		<image class="fmail_bg" src="@/static/images/fmail_bg1.jpg" mode="aspectFill"></image>
		<view class="title">
			<view class="title_left">多年以后，</view>
			<view class="title_right">愿你不负所望</view>
		</view>
		<view class="tips">
			已寄出
			<text>{{fmailCount < 0 ? 0 :fmailCount}}</text>
			封信
		</view>
		<u-button v-if="fmailCount >= -99" class="email_btn" @click="handleGoSend">给未来写封信</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fmailCount: 0
			};
		},
		onShow() {
			this.getFmailCount()
		},
		methods: {
			handleGoSend() {
				uni.navigateTo({
					url: '../../subFmail/pages/index/index'
				});
			},
			getFmailCount() {
				this.$u.api.getPool(['fmailCount']).then(({
					data
				}) => {
					this.fmailCount = data.fmailCount;
				});
			}
		}
	};
</script>

<style lang="scss">
	.fmail {
		width: 100vw;
		height: 100vh;
		overflow: hidden;

		.fmail_bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100vw;
			height: 100vh;
			z-index: -1;
		}

		.title {
			font-size: 50rpx;
			width: fit-content;
			height: 470rpx;
			padding: 10rpx;
			margin: 0 auto;
			display: flex;
			margin-top: 20%;
			box-shadow: 1px 1px 3px rgba(255, 255, 255, 0.6);
			text-shadow: 0 0 1px #ddd;

			.title_left {
				writing-mode: vertical-lr;
			}

			.title_right {
				writing-mode: vertical-lr;
				text-align: center;
				margin-top: 140rpx;
				margin-left: 12rpx;
			}
		}

		.tips {
			position: absolute;
			top: 75%;
			left: 10%;

			text {
				padding: 0 6rpx;
				font-size: 1.2em;
				color: #eee;
			}
		}

		.email_btn {
			position: absolute;
			width: fit-content;
			top: 80%;
			left: 0;
			right: 0;
			margin: 0 auto;
		}
	}
</style>
